<template>
  <BasicModal
    width="800px"
    destroyOnClose
    title="编辑收款信息"
    @register="register"
    @ok="handleSubmit"
  >
    <a-form :model="formState" :labelCol="{ span: 7 }">
      <a-form-item v-if="codeInfo && codeInfo?.name" label="收款通道" name="code">
        <a-input disabled :value="codeInfo.name" />
      </a-form-item>
      <a-form-item
        v-for="(item, index) in codeInfo?.input"
        :key="index"
        :label="item.title"
        :name="item.id"
      >
        <a-input v-model:value="formState.input[index].value" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.bankStatus === '1'"
        label="请选择开户行"
        name="bank"
      >
        <a-select v-model:value="formState.bank" :options="bankList" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.maxMoneyStatus === '1'"
        label="单笔最大金额"
        name="maxMoney"
      >
        <a-input v-model:value="formState.maxMoney" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.minMoneyStatus === '1'"
        label="单笔最小金额"
        name="minMoney"
      >
        <a-input v-model:value="formState.minMoney" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.limitMoneyStatus === '1'"
        label="单日收款金额"
        name="limitMoney"
      >
        <a-input v-model:value="formState.limitMoney" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.limitNumberStatus === '1'"
        label="单日收款笔数"
        name="limitNumber"
      >
        <a-input v-model:value="formState.limitNumber" />
      </a-form-item>
      <a-form-item
        required
        v-if="codeInfo && codeInfo?.regularNumberStatus === '1'"
        label="收款固额设定"
        name="regularNumber"
      >
        <a-input v-model:value="formState.regularNumber" />
      </a-form-item>
      <a-form-item required v-if="codeInfo && codeInfo?.IntraCity === '1'" label="同城匹配">
        <a-row :gutter="6">
          <a-col :span="12">
            <a-select
              v-model:value="formState.province"
              :fieldNames="{ label: 'name', value: 'id' }"
              @change="loadCityData"
              :options="provinceList"
              placeholder="请选择省"
            />
          </a-col>
          <a-col :span="12">
            <a-select
              v-model:value="formState.city"
              :fieldNames="{ label: 'name', value: 'id' }"
              :options="cityList"
              placeholder="请选择市"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item
        v-if="codeInfo && codeInfo?.agentImgStatus === '1'"
        :label="codeInfo?.agentImgTitle"
        required
      >
        <a-upload
          :max-count="1"
          v-model:file-list="fileList"
          list-type="picture"
          :beforeUpload="uploadFunc"
          @remove="handleFileRemove"
        >
          <a-button type="primary">
            <upload-outlined />
            {{ codeInfo?.agentButtonTitle }}
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item
        v-if="codeInfo && codeInfo?.analysisStatus === '1'"
        :label="codeInfo?.analysisTitle"
        required
      >
        <a-input v-model:value="formState.analysisSrc" />
        <span v-html="codeInfo?.analysisContent"></span>
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import {
    GetCollectionCodeApi,
    GetBanksApi,
    EditCollectionApi,
    GetAreaApi,
  } from '@/api/collection';
  import message from '@/views/form-design/utils/message';
  import { uploadApi } from '@/api/sys/upload';
  import { UploadOutlined } from '@ant-design/icons-vue';
  import { onMounted, ref } from 'vue';

  const bankList = ref([]);
  const codeInfo = ref(null);
  const provinceList = ref([]);
  const cityList = ref([]);
  onMounted(() => {
    GetBanksApi({}).then((res) => {
      bankList.value = res.list;
    });
    GetAreaApi({ id: '' }).then((res) => {
      provinceList.value = res.list;
    });
  });

  const formState = ref({
    code: null,
    input: null,
    maxMoney: null,
    minMoney: null,
    limitMoney: null,
    limitNumber: null,
    regularNumber: null,
    bank: null,
    province: null,
    city: null,
    agentImgSrc: null,
    analysisSrc: null,
    status: '0',
  });

  const fileList = ref([]);

  const [register, { closeModal }] = useModalInner(({ id, name, record }) => {
    loadCityData(record.province).then(() => {
      GetCollectionCodeApi({ code: id }).then((res) => {
        codeInfo.value = res;
        codeInfo.value.name = name;
        fileList.value = [
          {
            uid: -1,
            name: '图片',
            status: 'done',
            url: record.agentImgSrc,
            response: {
              full_url: record.agentImgSrc,
            },
          },
        ];
        formState.value = {
          ...record,
          province: Number(record.province),
          city: Number(record.city),
        };
        formState.value.input = record.input;
      });
    });
  });

  const loadCityData = async (e) => {
    await GetAreaApi({ id: e }).then((res) => {
      cityList.value = res.list;
    });
    return true;
  };

  const handleSubmit = () => {
    const params = {
      ...formState.value,
      code: codeInfo.value?.code,
    };
    EditCollectionApi(params).then(() => {
      message.success('修改成功');
      closeModal();
    });
  };

  const uploadFunc = (file) => {
    uploadApi({
      file: file,
      filename: file.name,
    }).then((res) => {
      const { data } = res;
      if (data.code === 1) {
        fileList.value[0].status = 'done';
        fileList.value[0].response = data.data.file;
        formState.value.agentImgSrc = data.data.file.full_url;
        message.success(data.msg);
      } else {
        fileList.value[0].status = 'error';
        message.error(data.msg);
      }
    });
    return false;
  };

  const handleFileRemove = () => {
    formState.value.agentImgSrc = null;
  };
</script>
